<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/reset.css" />
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<title>首页</title>
		<style type="text/css">
			.top-height {
				height: 40px;
				color: #B0B0B0;
				line-height: 40px;
			}

			.bg-1 {
				background-color: #333;
			}

			.bg-2 {
				background-color: #333;
			}

			body {
				margin: 0;
				padding: 0;
			}

			< !-- 中间部分 -->#reset-100 {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100px;
			}

			.carousel-height {
				height: 460px;
			}

			.main-prodcut-phone {
				height: 180px;
				width: 100%;
				background-color: #0B5ED7;
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<div class="container" style="margin:0;padding:0;width: 100%;height: auto;">
			<!-- 头部 -->
			<div class="row">
				<div class="col-sm-8 bg-1 top-height">
					<div class="col-sm-2">
						小米商城 <span>|</span>
					</div>
					<div class="col-sm-2">
						MIUI <span>|</span>
					</div>
					<div class="col-sm-2">
						IoT <span>|</span>
					</div>
					<div class="col-sm-2">
						IoT <span>|</span>
					</div>
					<div class="col-sm-2">
						IoT <span>|</span>
					</div>
					<div class="col-sm-2">
						IoT <span>|</span>
					</div>
				</div>
				<div class="col-sm-4 bg-2 top-height">002</div>
			</div>
			<!-- 中间部分 -->
			<div class="row">
				<!-- 中间部分-横向导航 -->
				<div class="container" style="margin:0;padding:0;width: 100%;background-color: #0A53BE;">
					<div class="col-sm-2">sgdg</div>
					<div class="col-sm-10">
						<nav class="navbar navbar-default" role="navigation">
							<div class="container-fluid">
						    <div class="navbar-header">
						        <a class="navbar-brand" href="#">菜鸟教程</a>
						    </div>
						    <div>
						        <form class="navbar-form navbar-left" role="search">
						            <div class="form-group">
						                <input type="text" class="form-control" placeholder="Search">
						            </div>
						            <button type="submit" class="btn btn-default">提交按钮</button>
						        </form>
						        <button type="button" class="btn btn-default navbar-btn">
						            导航栏按钮
						        </button>
						    </div>
							</div>
						</nav>
					</div>
				</div>
				<!-- 中间轮播图 -->
				<div id="myCarousel" class="carousel slide">
					<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner carousel-height">
						<div class="item active">
							<img src="img/lb01.webp" alt="First slide">
						</div>
						<div class="item">
							<img src="img/lb02.jpg" alt="Second slide">
						</div>
						<div class="item">
							<img src="img/lb03.webp" alt="Third slide">
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
						<span class="sr-only">Previous</span>
					</a>
					<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
						<span class="sr-only">Next</span>
					</a>
				</div>
				<!-- 组件 -->
				<!-- ctrl + / -->
				<div class="main-prodcut-phone">
					<div class="col-sm-3" style="background-color: #04414D;height: inherit;">
						测试
					</div>
					<div class="col-sm-9" style="background-color: #0DCAF0;height: inherit;">
						<div class="col-sm-4" style="background-color: red;height: inherit;"></div>
						<div class="col-sm-4" style="background-color: green;height: inherit;"></div>
						<div class="col-sm-4" style="background-color: yellow;height: inherit;"></div>
					</div>
				</div>
			</div>
			<!-- 底部 -->
			<div class="row"></div>
		</div>
		<script type="text/javascript">
			// 测试取出密码
			var userInfo = localStorage.getItem("userInfo")
			console.log("userInfo=" + userInfo)
		</script>
	</body>
</html>
